<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>
    <%= VUE_APP_DISPLAY_NAME %>
  </title>
  <link rel="icon" href="./static/logo.png" type="image/png" >
  <script>
    var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
  </script>
  <style>
    .xsplash {
      background-color: #e2e2e2;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 999999999;
    }

    .xsplash>.title {
      color: #333;
      font-size: 28px;
    }

    .xsplash>.subtitle {
      color: #333;
      font-size: 14px;
    }

    .xsplash>.progress {
      margin-top: 30px;
      background-color: #fff;
      border: 2px solid #fff;
      border-radius: 9999px;
      width: 50vw;
      line-height: 0;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    }

    .xsplash>.progress>.progress-bar {
      display: inline-block;
      background-color: #f1f1f1;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      height: 14px;
      width: 0px;
      transition: width 10s;
      transition-timing-function: cubic-bezier(0, 0, 0, 0.3, 0.58, 0.8, 1, 1, 1);
    }

    .xsplash>.progress>.progress-bar-run {
      width: 60%;
    }
  </style>
  <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>

<body>
  <noscript>
    <strong>Please enable JavaScript to continue.</strong>
  </noscript>
  <div id="app"></div>
  <div class="xsplash">
    <div class="title">
      <%= VUE_APP_DISPLAY_NAME %>
    </div>
    <div class="subtitle">
      <%= VUE_APP_DESCRIPTION %>
    </div>
    <div class="subtitle">
      <%= VUE_APP_VERSION %>
    </div>
    <div class="progress">
      <div class="progress-bar" />
    </div>
  </div>
</body>
<script>
  function $xSplashStart() {
    setTimeout(function () {
      document.querySelector('.xsplash > .progress > .progress-bar').className += ' progress-bar-run'
    }, 0)
  }

  function $xSplashStop() {
    $xSplashStatus()&&document.querySelector('.xsplash').remove()
  }

  function $xSplashStatus() {
    return Boolean(document.querySelector('.xsplash') )
  }

  $xSplashStart()
</script>

</html>